<template>
	<view class="my-search-container">
		<view class="text_field" @click="handleClick()">
			<uni-icons type="search" size="15" ></uni-icons>
			<text class="placeholder">搜索</text>
		</view>
	</view>
</template>

<script>
	export default {
		name:"my-search",
		
		data() {
			return {
				
			};
		},
		methods:{
			handleClick(){
				this.$emit("handleClick");
			}
		}
	}
</script>

<style lang="scss">

.my-search-container {
	background-color: #f00000;
	height: 50px;
	display: flex;
	justify-content: center; /* 水平居中 */
	align-items: center;    /* 垂直居中 */
	position: sticky;
	top: 0;
	z-index: 1000;
	
	.text_field{
		background-color: #ffffff;
		height: 30px;
		width: 90%;
		border-radius: 15px;
		display: flex;
	    justify-content: center; /* 水平居中 */
	    align-items: center;    /* 垂直居中 */
		
		.placeholder {
			font-size: 15px;
			margin-left: 5px;
		}
	}
}
</style>